/*
  学习目标：props指定默认值 
  关键词 ： 组件.defaultProps = {}
*/
import React from 'react';
// 1. 引进props-types
import PropTypes from 'prop-types';
class App extends React.Component {
  render() {
    return (
      <div>
        我是app父组件
        <Child
          str="字符串"
          arr={[]}
          bl={false}
          fn={() => {}}
          obj={{ name: 'zs' }}
          student={{ name: 'zs', age: 20 }}
          jsx={<div>jsx</div>}
        ></Child>
      </div>
    );
  }
}
class Child extends React.Component {
  // 通过 static 把 默认值和校验规格都写在 class 里面，方便维护
  static defaultProps = {
    str: '默认的str',
    num: 9999,
  };
  static propTypes = {
    str: PropTypes.string.isRequired,
    num: PropTypes.number,
    arr: PropTypes.array,
    // 注意 bool 和 func 的写法
    bl: PropTypes.bool,
    fn: PropTypes.func,
    obj: PropTypes.object,
    student: PropTypes.shape({
      name: PropTypes.string,
      age: PropTypes.number,
    }),
    jsx: PropTypes.element,
  };
  render() {
    return (
      <div>
        我是Child子组件 - {this.props.str} - {this.props.num}
      </div>
    );
  }
}

// 设置 props 的默认值
// Child.defaultProps = {
//   str: '默认的str',
//   num: 10000,
// };

// 给组件设置校验规则，注意属性名是小写
// 1. 常见类型：array、number、string、bool、func、object
// 2. 特定结构的对象：shape
// 3. React元素类型：element
// 3. 必填项：isRequired
// Child.propTypes = {
//   str: PropTypes.string.isRequired,
//   num: PropTypes.number,
//   arr: PropTypes.array,
//   // 注意 bool 和 func 的写法
//   bl: PropTypes.bool,
//   fn: PropTypes.func,
//   obj: PropTypes.object,
//   student: PropTypes.shape({
//     name: PropTypes.string,
//     age: PropTypes.number,
//   }),
//   jsx: PropTypes.element,
// };

export default App;
